<template>
  <view class="page">
    <fu-custom bgColor="bg-white text-333" :isBack="true">
      <block slot="content">{{i18n['超值拼单']}}</block>
    </fu-custom>
    <fu-loading v-if="isShowLoading"></fu-loading>
    <block v-else>
      <view class="page-content">
        <block v-for="(item, index) in lists" :key="index">
          <view
            class="radius-24 bg-white padding-sm flex margin-bottom-sm"
            @tap="toDeatil(item)"
          >
            <view class="block-246 radius overHidden">
				<fu-image :src="item.thumb" mode="aspectFill"></fu-image>
            </view>
            <view class="flex-sub margin-left-sm flex flex-direction">
              <view class="text-bold text-333 text-df text-cut-2">{{
                item.name
              }}</view>
              <view class="flex margin-top-xs align-center">
                <view class="cu-progress round xs">
                  <view
                    class="fu-bgcred"
                    :style="[{ width: item.rate + '%' }]"
                  ></view>
                </view>
                <view class="margin-left text-xs width78" >{{ item.rate + "%" }}</view>
              </view>
              <view class="text-sm text-999 margin-top-xs"
                >{{ item.sales_sum }}{{i18n['人拼单成功']}}</view
              >
              <view class="margin-top-sm flex justify-between">
                <view>
                  <view class="fu-cred">
                    <text class="text-price text-sm"></text>
                    <text class="text-xl">{{ item | filterGoodsPrice }}</text>
                  </view>
                  <view class="text-through">
                    <text class="text-price text-sm"></text>
                    <text class="text-sm">{{ item.market_price }}</text>
                  </view>
                </view>
                <view>
                  <view class="item-btn">{{i18n['马上拼']}}</view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
      <uni-load-more v-if="lists.length > 5" :status='status'></uni-load-more>
    </block>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowLoading: false,
      CustomBar: this.CustomBar,
      TabCur: 0,
      lists: [],
      status: "more",
      page: 1,
      list_rows: 10,
      isInit: false,
    };
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    // 加载数据
    loadData(value) {
      if (this.status != "more") return;
      this.status = "loading";
      let data = {
        start_time: 0,
        end_time: 23,
        page: this.page,
        list_rows: this.list_rows,
        type: 2,
      };
      if (this.page == 1 && !value) {
        this.isShowLoading = true;
      }
      this.$api
        .post(global.apiUrls.postSeckillList, data)
        .then((res) => {
          this.isShowLoading = false;
          if (res.statusCode == 200 && res.data.code == 1) {
            res = res.data;
            console.log("拼团", res);
            var totalSize = res.data.total;
            var curPageData = res.data.list;
            if (this.page == 1) this.lists = [];
            this.lists = this.lists.concat(curPageData);
            if (this.lists.length < totalSize) {
              this.status = "more";
              this.page++;
            } else {
              this.status = "noMore";
            }
          }
          this.isInit = true;
          uni.stopPullDownRefresh();
        })
        .catch((err) => {
          this.isShowLoading = false;
          console.log("ERROR", err);
          uni.stopPullDownRefresh();
        });
    },
    // 去详情页
    toDeatil(item) {
      this.$urouter.navigateTo({
        url: "/pages/activity/assemble/assemble-detail/index",
        params: {
          goods_id: item.goods_id,
          sku_id: item.sku_id || 0,
          activity_id: item.activity_id || 0,
        },
      });
    },
  },
  onPullDownRefresh() {
    this.status = "more";
    this.page = 1;
    this.loadData(true);
  },
  onReachBottom() {
    if (this.status == "more") {
      this.loadData();
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
}

.page-content {
  padding: 32rpx;
}
.item-btn {
  width: 120rpx;
  height: 66rpx;
  font-size: 20rpx;
  color: #ffffff;
  border-radius: 8rpx;
  line-height: 66rpx;
  text-align: center;
  background: $bgtheme;
}

.radius-24 {
  border-radius: 24rpx;
}

.block-246 {
  width: 246rpx;
  height: 246rpx;
  min-width: 246rpx;
  min-height: 246rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.text-333 {
  color: #333333;
}
.text-999 {
  color: #999999;
}
.text-cut-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text-through {
  text-decoration: line-through;
}
.width78{
  width: 78rpx;
}
</style>
